<template>
    <div>

        <div
            class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600"
        >
            <div
                class="p-8 bg-white rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300"
            >
                <div class="text-center">
                    <h1 class="text-4xl font-bold text-gray-800 mb-4">
                        <el-icon><Sunny /></el-icon>{{ $t('welcome') }}<el-icon><Sunny /></el-icon>
                    </h1>
                    <p class="text-lg text-gray-600 mb-6">{{$t('currentLanguage')}}：{{ locale }}</p>
                    <div class="space-y-4">
                        <button
                            class="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg hover:opacity-90 transition-opacity"
                        >
                            开始探索
                        </button>
                        <el-button icon="ChatSquare" @click="onClick" >欢迎语</el-button>
                        <el-button  icon="Switch" @click="onSwitchLang">切换语言</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const { locale, t } = useI18n()
console.log(t('welcome'))

const onSwitchLang = () => {
    locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
}


const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const onClick = () => {
    ElMessage({
        message: `Hello ${userInfo.value.username}`,
        type: "success",
    });
}

const appConfig = useAppConfig()
console.log('app的title', appConfig.title);

</script>
